<template>
  <view>
    <!-- 1.0 搜索框组件 -->
    <Search />
    <!-- 2.0 顶部 Tabs -->
    <Tabs
      :tabsData="tabsData"
      @change="getTabsIndex"
    />
    <!-- 3.0 商品列表 -->
    <view class="goods_list">
      <!-- 渲染商品项，把 item 数据传递给子组件 -->
      <GoodsItem
        v-for="item in goods"
        :key="item.goods_id"
        :item="item"
      />
      <!-- 条件渲染：准备一个底部的提示盒子 -->
      <view
        class="tips"
        v-if="hasMore === false"
      >😀我也是有底线的</view>
    </view>
  </view>
</template>

<script>
import { getGoodsList } from "@/api";
// 导入搜索框组件
import Search from "@/components/Search/index.vue";
import Tabs from "@/components/Tabs/index.vue";
import GoodsItem from "@/components/GoodsItem/index.vue";
export default {
  components: {
    Search,
    Tabs,
    GoodsItem,
  },
  data() {
    return {
      tabsData: [
        { id: 1, text: "综合" },
        { id: 2, text: "销量" },
        { id: 3, text: "价格" },
      ],
      cid: "",
      pagenum: 1, // 页码
      pagesize: 10, // 页容量
      goods: [],
      hasMore: true, // 是否还有更多数据
    };
  },
  // 在 onLoad 生命周期函数中，可以获取到页面参数
  onLoad({ cid }) {
    // console.log(cid);
    // 把 cid 存储到 data 中方便发请求的时候使用
    this.cid = cid || 927;
    // 根据 cid 分类参数，发送网络请求，
    this.getListData();
  },
  // 这个事件的名称是小程序官方规定的，不能乱写，用于捕获用户触底事件的
  onReachBottom() {
    if (this.hasMore === true) {
      console.log("页面准备触底时触发");
      // 页码加 1
      this.pagenum += 1;
      // 重新发送请求
      this.getListData();
    }
  },
  // 这个事件名称也是小程序规定的，监听用户下拉刷新事件。
  async onPullDownRefresh() {
    console.log("用户下拉页面了");
    // 重新初始化请求参数
    this.pagenum = 1;
    this.goods = [];
    this.hasMore = true;
    // 根据新的参数重新发送一次请求
    await this.getListData();
    // 请求完成后，需要主动停止下拉刷新动画
    uni.stopPullDownRefresh();
  },
  methods: {
    // 获取商品列表数据
    async getListData() {
      // 调用 loading 提示
      uni.showLoading({ title: "疯狂加载中..." });
      // 调用封装的获取商品列表接口
      const res = await getGoodsList({
        cid: this.cid,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      });
      // 解构出来列表数据，解构出来总条数
      const { goods, total } = res.data.message;
      // 更新到 data 中，用于页面渲染的，分页的时候注意数据的连接
      this.goods = [...this.goods, ...goods];
      // 请求结束立刻隐藏 loading 提示
      uni.hideLoading();
      // 如果总条数 等于 当前数组长度
      if (total === this.goods.length) {
        // 更新标记，已经没有更多数据了。
        this.hasMore = false;
      }
    },
    getTabsIndex(index) {
      console.log("由子组件传递过来的索引", index);
    },
  },
};
</script>

<style lang="less">
.tips {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>